<template>
    <div class="swiper-container">
        <div class="swiper-wrapper"> 
            <div class="swiper-slide" v-for="(item,index) in imgs" :key="index"> 
                <img :src="item"/> 
            </div> 
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; 
import "swiper/dist/css/swiper.css";
import axios from 'axios'

export default {
  components: {
    Swiper
  },
  data:function(){
    return{
        imgs:[]
    }
  },
  async mounted() {
    var mySwiper = new Swiper('.swiper-container', { 
      loop: true,
      direction : 'horizontal',
      observer: true,
      autoplay: {
          delay: 3000,//延迟时长
          stopOnLastSlide: false,
          disableOnInteraction: false
      },
      pagination: {
          el: '.swiper-pagination',
          clickable: true,//允许分页点击跳转
        }
     });

     let bannerImgs=await axios.get('http://localhost:3000/banner?type=2').then(res=>res.data.banners);
     for(var i=0;i<12;i++){
        this.imgs.push(bannerImgs[i].pic) 
     }
  }
}
</script>

<style>
.swiper-container{
    width: 7rem;
    height: 3.3rem;
    border-radius: 0.2rem;
}
.swiper-container img{
    width:7rem;
    height: 3.3rem;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: black;
}
</style>